<!-- CPU使用率统计图  -->
<template>
  <div id="cpu-chart-main">
<!--    <div class="title-panel">

    </div>-->
    <div ref="cpuchartContainer" class="cpu-chart-container"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name:"CpuChart",
  props: {
    datas: Array
  },
  watch:{
    datas(){
      //console.log(">>>>>>>>>>>> datas: %o",this.datas);
      this.xData.length=0;
      this.yData.length=0;
      if (!!this.datas){
        for(let i in this.datas){
          this.xData.push(this.datas[i].time);
          this.yData.push(this.datas[i].used);
        }
        this.chartOption.xAxis.data = this.xData;
        this.chartOption.series[0].data=this.yData;
        this.refresh();
      }

      //console.log(">>>>>>>>>>>> xData: %o",this.xData);
      //console.log(">>>>>>>>>>>> yData: %o",this.yData);


    }
  },
  data(){
    return{
      xData:[],
      yData:[],
      mychart:null,
      chartOption:{
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        xAxis: {
          nameLocation: 'start',
          nameTextStyle:{
            color: '#FFFFFF',
            fontSize:10
          },
          type: 'category',
          boundaryGap: ['20%', '20%'],
          show:true,
          axisLine:{
            show:true,
            lineStyle:{
              color:'#FFFFFF'
            }
          },
          minorTick:{show:true,},
          axisLabel:{
            show:true,
            color:'#FFFFFF',
          },
          //data: ['13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00']
          data: this.xData
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            show:true,
            color:'#FFFFFF',
            formatter: '{value}%',
            fontStyle:{
              fontSize: 8,
            }
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#FFFFFF'
            }
          },
          max: 99
        },

        title: {
          text: this.$t('cpu_used_rate'),//'CPU使用',
          left: 'center',
          top: 'top',
          textStyle:{
            color: '#FFFFFF',
            fontSize: 18
          },
        },
        /*        legend: { //图例组件
                  orient: 'vertical',
                  left: 140,
                  top: 30,
                  align: 'left',
                  itemGap: 5,
                  itemWidth: 25,
                  textStyle:{
                    color: '#FFFFFF',
                    fontSize: 10
                  },
                  tooltip: {
                    show: true
                  }
                },*/
        series: [
          {
            name: this.$t('cpu_used_rate'),//'CPU使用',
            type: 'line',
            //data: [12, 65, 90, 20, 30, 5, 64],
            data: this.yData,
            smooth: true,
            //colorBy:'data',
            symbolSize:3,
            areaStyle: {color:'#8ef8e7'},
            left:'right',
            /*            label:{
                          show:true,
                          formatter:'{c}%',
                          color:'#FFFFFF',
                        },*/
            lineStyle:{
              color:'#8ef8e7',
            },
            /*            tooltip: {
                          show: true
                        }*/
            /*            emphasis: {
                          itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                        },*/
            /*            label: {
                          show: false,
                          position: 'right'
                        },*/
          }
        ]
      }
    }

  },
  methods:{
    start() {
      this.mychart = echarts.init(this.$refs.cpuchartContainer);
    },
    refresh(){
      //let mychart = this.$echarts.init(this.$refs.chartContainer);// document.getElementById('chart-container'));
      this.mychart.setOption(this.chartOption);
    }
  },
  mounted() {
    this.start();
    this.refresh();
  }
}
</script>
<style lang="less">
#cpu-chart-main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title-panel{
    width: 100%;
    height: 50px;
    border: 1px solid #14edc5;
  }
}

.cpu-chart-container{
  margin-top: 20px;
  width: 100%;
  height: 100%;
}
</style>
